<template>
  <div class="particle-background" ref="particleContainer">
    <div class="corner-lights">
      <div class="corner-light top-left"></div>
      <div class="corner-light top-right"></div>
      <div class="corner-light bottom-left"></div>
      <div class="corner-light bottom-right"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const particleContainer = ref<HTMLElement>()
let animationId: number | null = null
let particles: Array<{
  x: number
  y: number
  vx: number
  vy: number
  size: number
  opacity: number
  element: HTMLElement
}> = []

const createParticle = () => {
  if (!particleContainer.value) return

  const particle = document.createElement('div')
  particle.className = 'particle'
  
  const size = Math.random() * 0.2 + 0.1 // 0.1vw to 0.3vw
  const x = Math.random() * 100
  const y = Math.random() * 100
  const vx = (Math.random() - 0.5) * 0.5 // -0.25 to 0.25 vw/s
  const vy = (Math.random() - 0.5) * 0.5
  const opacity = Math.random() * 0.6 + 0.2 // 0.2 to 0.8

  particle.style.left = x + '%'
  particle.style.top = y + '%'
  particle.style.width = size + 'vw'
  particle.style.height = size + 'vw'
  particle.style.opacity = opacity.toString()

  particleContainer.value.appendChild(particle)

  particles.push({
    x, y, vx, vy, size, opacity, element: particle
  })
}

const updateParticles = () => {
  particles.forEach((particle, index) => {
    particle.x += particle.vx
    particle.y += particle.vy

    // 边界检测和绕行
    if (particle.x < 0 || particle.x > 100) {
      particle.vx *= -1
      particle.x = Math.max(0, Math.min(100, particle.x))
    }
    if (particle.y < 0 || particle.y > 100) {
      particle.vy *= -1
      particle.y = Math.max(0, Math.min(100, particle.y))
    }

    // 更新位置
    particle.element.style.left = particle.x + '%'
    particle.element.style.top = particle.y + '%'

    // 随机改变方向（模拟碰撞）
    if (Math.random() < 0.01) {
      particle.vx = (Math.random() - 0.5) * 0.5
      particle.vy = (Math.random() - 0.5) * 0.5
    }
  })

  animationId = requestAnimationFrame(updateParticles)
}

const initParticles = () => {
  if (!particleContainer.value) return

  // 根据屏幕大小调整粒子数量
  const particleCount = Math.min(Math.max(window.innerWidth / 20, 30), 150)
  
  for (let i = 0; i < particleCount; i++) {
    createParticle()
  }

  updateParticles()
}

const cleanup = () => {
  if (animationId) {
    cancelAnimationFrame(animationId)
    animationId = null
  }
  
  particles.forEach(particle => {
    if (particle.element.parentNode) {
      particle.element.parentNode.removeChild(particle.element)
    }
  })
  particles = []
}

onMounted(() => {
  initParticles()
})

onUnmounted(() => {
  cleanup()
})
</script>

<style scoped>
.particle-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: radial-gradient(circle, #64ffda 0%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 6px #64ffda;
  transition: all 0.1s ease;
}

.corner-lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.corner-light {
  position: absolute;
  width: 2vw;
  height: 2vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 255, 218, 0.8) 0%, transparent 70%);
  animation: corner-pulse 15s ease-in-out infinite;
}

.corner-light.top-left {
  top: 2vw;
  left: 2vw;
  animation-delay: 0s;
}

.corner-light.top-right {
  top: 2vw;
  right: 2vw;
  animation-delay: 3.75s;
}

.corner-light.bottom-left {
  bottom: 2vw;
  left: 2vw;
  animation-delay: 7.5s;
}

.corner-light.bottom-right {
  bottom: 2vw;
  right: 2vw;
  animation-delay: 11.25s;
}

@keyframes corner-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
    box-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
  }
  25% {
    transform: scale(1.5);
    opacity: 0.8;
    box-shadow: 0 0 40px rgba(157, 78, 221, 0.5);
  }
  50% {
    transform: scale(1.2);
    opacity: 0.6;
    box-shadow: 0 0 30px rgba(244, 114, 182, 0.4);
  }
  75% {
    transform: scale(1.8);
    opacity: 0.9;
    box-shadow: 0 0 50px rgba(100, 255, 218, 0.6);
  }
}

/* 响应式调整 */
@media (max-width: 1366px) {
  .corner-light {
    width: 1.5vw;
    height: 1.5vw;
  }
}

@media (min-width: 2560px) {
  .corner-light {
    width: 2.5vw;
    height: 2.5vw;
  }
}
</style>

